<template>
  <div class="app-container">
    <div class="cardBox">
      <el-form :inline="true" class="search-form">
        <el-row style="display: flex; flex-wrap: wrap">
          <div style="flex: 1">
            <el-form-item label="活动名称：">
              <el-input
                placeholder="请输入名称"
                v-model="searchForm.award_name"
                maxlength="20"
                show-word-limit
                onkeyup="value =value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '')"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="状态：">
              <el-select v-model="searchForm.status" placeholder="请选择状态">
                <el-option
                  v-for="item in [
                    { name: '过期', id: '-1' },
                    { name: '开启', id: '1' },
                    { name: '进行中', id: '2' },
                    { name: '关闭', id: '3' },
                  ]"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resetting"
                >重置</el-button
              >
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="cardBox" style="margin-top: 20px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-button
            v-hasPermi="'raffle/save'"
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click="saveWay('/activity/raffle/save')"
            >添加抽奖活动</el-button
          >
        </el-col>
        <el-col :span="8" style="float: right">
          <div class="right-panel el-button-group">
            <el-button
              class=""
              icon="el-icon-refresh"
              size="mini"
              @click="resetting"
            ></el-button>
            <el-dropdown trigger="click" :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button
                  class=""
                  icon="el-icon-s-operation"
                  size="mini"
                ></el-button>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                  <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                    tableTheadOptions[fruit].label
                  }}</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
      <el-col class="marginTop">
        <el-table
          v-loading="loading"
          highlight-current-row
          :data="dataList"
          :header-cell-style="{
            'background-color': '#f3f8fe',
            color: '#606266',
            height: '50px',
          }"
          style="width: 100%"
        >
          <el-table-column
            v-for="fruit in tableThead"
            :key="fruit"
            :label="tableTheadOptions[fruit].label"
            min-width="80"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="fruit == 'status'">
                <el-tag v-if="scope.row.status == -1" type="danger"
                  >活动结束</el-tag
                >
                <el-tag v-if="scope.row.status == 1" type="success"
                  >已开启</el-tag
                >
                <el-tag v-if="scope.row.status == 3" type="warning"
                  >已关闭</el-tag
                >
                <el-tag v-if="scope.row.status == 2" type="success"
                  >进行中</el-tag
                >
              </div>
              <div v-else>
                {{ scope.row[fruit] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="活动任务" align="center">
            <template slot-scope="scope">
              <el-button
                @click="savetaskWay(scope.row)"
                type="text"
                icon="el-icon-view"
                >配置任务</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="活动商品" align="center">
            <template slot-scope="scope">
              <el-button
                @click="saveGoodsWay(scope.row)"
                v-if="scope.row.is_goods == 1"
                type="text"
                icon="el-icon-view"
                >查看商品</el-button
              >
              <el-button
                v-else
                @click="saveGoodsWay(scope.row)"
                type="text"
                icon="el-icon-circle-plus-outline"
                >添加商品</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="活动奖品" align="center">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.is_rule == 1"
                @click="saveRulesWay(scope.row)"
                type="text"
                icon="el-icon-view"
                >查看活动奖品</el-button
              >
              <el-button
                v-else
                @click="saveRulesWay(scope.row)"
                type="text"
                icon="el-icon-setting"
                >配置活动奖品</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            width="240"
            prop="address"
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                v-hasPermi="'raffle/status'"
                style="margin: 5px"
                v-if="scope.row.status == 1 || scope.row.status == 2"
                type="warning"
                size="mini"
                @click="saveStatus(scope.row, 3)"
              >
                关闭活动
              </el-button>
              <el-button
                v-hasPermi="'raffle/status'"
                style="margin: 5px"
                v-if="scope.row.status == 3"
                type="success"
                size="mini"
                @click="saveStatus(scope.row, 1)"
              >
                开启活动
              </el-button>
              <el-button
                v-hasPermi="'raffle/edit'"
                :disabled="scope.row.status == 2"
                style="margin: 5px"
                type="primary"
                size="mini"
                @click="editCoupon(scope.row)"
              >
                编辑
              </el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @confirm="deleteCoupon(scope.row)"
              >
                <el-button
                  v-hasPermi="'raffle/del'"
                  :disabled="scope.row.status == 2"
                  style="margin: 5px"
                  type="danger"
                  size="mini"
                  slot="reference"
                >
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col style="text-align: right">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="searchForm.page"
          :limit.sync="searchForm.count"
          @pagination="getListWay"
        />
      </el-col>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      title="活动任务"
      :visible.sync="taskVisible"
      width="700px"
      @close="taskClose"
    >
      <el-row style="position: relative" v-loading="taskVisibleLoading">
        <el-col>
          <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click="addtaskVisibleWay"
            >添加任务</el-button
          >
        </el-col>
        <el-col style="margin-top: 20px">
          <el-table
            highlight-current-row
            :data="taskData"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
          >
            <el-table-column prop="created_at" label="创建时间" align="center">
            </el-table-column>

            <el-table-column prop="gif_num" label="单次赠送次数" align="center">
            </el-table-column>
            <el-table-column
              prop="total_num"
              label="最多赠送抽奖次数"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="type" label="任务类型" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.type == 1" size="mini"
                  >购买指定商品</el-tag
                >
                <el-tag v-if="scope.row.type == 2" size="mini"
                  >兑换指定积分商品</el-tag
                >
                <el-tag v-if="scope.row.type == 3" size="mini">邀请注册</el-tag>
                <el-tag v-if="scope.row.type == 4" size="mini"
                  >完成实名认证</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="mini"
                  @click="deltaskWay(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
          </el-table>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          :loading="taskVisibleLoading"
          type="primary"
          @click="taskVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      title="任务信息"
      :visible.sync="addtaskVisible"
      width="700px"
      @close="addtaskClose"
    >
      <el-row style="position: relative" v-loading="addtaskLoading">
        <el-form
          :model="addtaskForm"
          :rules="addtaskRules"
          ref="addtaskForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-col :span="22">
            <el-form-item label="任务类型" prop="type">
              <el-radio-group v-model="addtaskForm.type">
                <el-radio :label="1">购买指定商品</el-radio>
                <el-radio :label="2">兑换指定积分商品</el-radio>
                <el-radio :label="3">邀请注册</el-radio>
                <el-radio :label="4">完成实名认证</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="最多赠送" prop="total_num">
              <el-input
                placeholder="请输入最多赠送抽奖次数"
                v-model="addtaskForm.total_num"
                maxlength="20"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="单次赠送" prop="gif_num">
              <el-input
                placeholder="请输入单次赠送次数"
                v-model="addtaskForm.gif_num"
                maxlength="20"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="addtaskLoading" @click="addtaskVisible = false"
          >取 消</el-button
        >
        <el-button
          :loading="addtaskLoading"
          type="primary"
          @click="addtaskSubmitWay"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAwardList,
  delAward,
  SaveAwardStatus,
  getAwardTaskList,
  SaveAwardTask,
  delAwardTask,
} from "@/api/activity/index";
const tableTheadOption = {
  id: {
    label: "ID",
    field: "id",
  },
  created_at: {
    label: "创建时间",
    field: "created_at",
  },
  award_name: {
    label: "抽奖活动名称",
    field: "award_name",
  },
  start_time: {
    label: "开始时间",
    field: "start_time",
  },
  end_time: {
    label: "结束时间",
    field: "end_time",
  },

  user_lottery_num: {
    label: "每人抽奖总次数",
    field: "user_lottery_num",
  },
  user_days_lottery_num: {
    label: "每人每天抽奖总次数",
    field: "user_days_lottery_num",
  },
  description: {
    label: "说明",
    field: "description",
  },
  status: {
    label: "状态",
    field: "status",
  },
};
const allTableThead = [
  "id",
  "created_at",
  "award_name",
  "start_time",
  "end_time",
  "user_lottery_num",
  "user_days_lottery_num",
  "description",
  "status",
];
const defaultTableThead = [
  "created_at",
  "award_name",
  "start_time",
  "end_time",
  "user_lottery_num",
  "user_days_lottery_num",
  "description",
  "status",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: true,
      searchForm: {
        award_name: "", // 抽奖活动名称
        status: "", // 状态状态：-1过期 1开启 2进行中 3关闭
        page: 1,
        count: 10,
      },
      dataList: [],
      total: 0,
      taskVisible: false,
      taskVisibleLoading: false,
      taskData: [],
      taskDataObj: {},
      addtaskVisible: false,
      addtaskLoading: false,
      addtaskForm: {
        id: "",
        award_id: "",
        type: 1,
        gif_num: "",
        total_num: "",
      },
      addtaskRules: {
        type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请选择任务类型"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        total_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (value === "") {
                callback(new Error("请输入最多赠送抽奖次数"));
              } else {
                if (req.test(value)) {
                  callback(new Error("只能为数字,且只能为整数"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        gif_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (value === "") {
                callback(new Error("请输入单次赠送次数"));
              } else {
                if (req.test(value)) {
                  callback(new Error("只能为数字,且只能为整数"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    getListWay() {
      this.loading = true;
      getAwardList(this.searchForm).then((res) => {
        this.loading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.loading = false;
          return this.$messages.error(res.msg);
        }
        this.dataList = res.data.list;
        this.total = res.data.total;
      });
    },
    resetting() {
      this.searchForm = {
        award_name: "", // 抽奖活动名称
        status: "", // 状态状态：-1过期 1开启 2进行中 3关闭
        page: 1,
        count: 10,
      };
      this.getListWay();
    },
    saveWay(url) {
      this.$router.push(url);
    },
    editCoupon(row) {
      this.$router.push("/activity/raffle/save?id=" + row.id);
    },
    deleteCoupon(row) {
      this.loading = true;
      delAward({ id: row.id })
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false;
            return this.$messages.error(res.msg);
          }
          this.$messages.success("删除成功");
          this.getListWay();
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    // 修改状态
    saveStatus(row, num) {
      var obj = {
        id: row.id,
        status: num,
      };
      this.loading = true;
      SaveAwardStatus(obj)
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false;
            return this.$messages.error(res.msg);
          }
          this.$messages.success("操作成功");
          this.getListWay();
        })
        .catch((err) => {
          this.$messages.error(err.msg);
          this.loading = false;
        });
    },
    saveGoodsWay(row) {
      this.$router.push("/activity/raffle/savegoods?pId=" + row.id);
    },
    saveRulesWay(row) {
      this.$router.push("/activity/raffle/saverules?pId=" + row.id);
    },
    taskClose() {
      this.taskDataObj = {};
    },
    savetaskWay(row) {
      this.taskDataObj = row;
      this.addtaskForm.award_id = row.id;
      this.taskVisible = true;
      this.taskVisibleLoading = true;
      getAwardTaskList({ award_id: row.id }).then((res) => {
        this.taskVisibleLoading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.taskVisibleLoading = false;
          return this.$messages.error(res.msg);
        }
        this.taskData = res.data;
      });
    },
    addtaskVisibleWay() {
      this.addtaskVisible = true;
    },
    addtaskClose() {
      this.addtaskForm = {
        id: "",
        award_id: this.taskDataObj.id,
        type: 1,
        gif_num: "",
        total_num: "",
      };
      if (this.$refs.addtaskForm) {
        this.$refs.addtaskForm.resetFields();
      }
    },
    deltaskWay(row) {
      this.taskVisibleLoading = true;
      delAwardTask({ id: row.id })
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.taskVisibleLoading = false;
            return this.$messages.error(res.msg);
          }
          this.$messages.success("删除成功");
          this.savetaskWay(this.taskDataObj);
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    addtaskSubmitWay() {
      this.$refs.addtaskForm.validate((valid) => {
        if (valid) {
          this.addtaskLoading = true;
          SaveAwardTask(this.addtaskForm).then((res) => {
            this.addtaskLoading = false;
            if (res.code !== 200 || res.status !== 1) {
              return this.$messages.error(res.msg);
            }
            this.addtaskClose();
            this.addtaskVisible = false;
            this.savetaskWay(this.taskDataObj);
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>